<template>
  <view class="wallpaper">
    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back' @click="goHome">
        <view class="nav-back-btn">
          <text class='icon tn-icon-home-smile'></text>
        </view>
      </view>
      <view slot="title" class="nav-title">壁纸资源库</view>
    </tn-nav-bar>
    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <!-- 顶部搜索区域 -->
      <view class="wallpaper__header">
        
        <!-- 标签列表 -->
        <scroll-view scroll-x class="wallpaper__tags" :show-scrollbar="false">
          <view 
            class="wallpaper__tag"
            :class="{'wallpaper__tag--active': activeTag === tag}"
            v-for="tag in tags" 
            :key="tag"
            @tap="handleTagSelect(tag)"
          >
            {{tag}}
          </view>
        </scroll-view>
      </view>

      <!-- 壁纸列表 -->
      <scroll-view
        scroll-y
        class="wallpaper__list"
        :style="{height: 'calc(100vh - ' + (vuex_custom_bar_height + 80) + 'px)'}" 
        @scrolltolower="handleLoadMore"
        refresher-enabled
        :refresher-triggered="isRefreshing"
        @refresherrefresh="handleRefresh"
        :scroll-top="scrollTop"
        @scroll="scroll"
      >
        <view class="wallpaper__grid">
          <view 
            class="wallpaper__item"
            v-for="(item, index) in wallpapers"
            :key="index"
            @click="handlePreview(item)"
          >
            <image 
              :src="item.image_url"
              mode="aspectFill"
              :lazy-load="true"
            />
            <view class="wallpaper__item-time">
              <text>05:20</text>
              <view class="wallpaper__item-hint">点击查看细节</view>
            </view>
          </view>
        </view>
        
        <!-- 加载更多 -->
        <view class="wallpaper__loading" v-if="loading">
          <tn-loading mode="circle"></tn-loading>
          <text>加载中...</text>
        </view>
        
        <!-- 无更多数据 -->
        <view class="wallpaper__empty" v-if="!loading && wallpapers.length === 0">
          <text>暂无相关壁纸</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { getWallpaperList } from '@/api/wallpaper.js'

export default {
  data() {
    return {
      searchText: '',
      activeTag: '全部',
      tags: ['全部', '风景', '抽象', '动物', '动漫', '艺术', '城市'],
      wallpapers: [],
      page: 1,
      loading: false,
      isRefreshing: false,
      hasMore: true,
      scrollTop: 0,
      old_scrollTop: 0
    }
  },
  
  onLoad() {
    this.loadWallpapers()
  },
  
  methods: {
    // 返回首页
    goHome() {
      uni.navigateTo({
        url: '/pages/index'
      })
    },
    // 加载壁纸列表
    async loadWallpapers(isRefresh = false) {
      if(!this.hasMore && !isRefresh) return
      
      this.loading = true
      try {
        const params = {
          page: isRefresh ? 1 : this.page,
          tags: this.activeTag === '全部' ? '' : this.activeTag,
        }
        
        const res = await getWallpaperList(params)
        
        if(res && res.success) {
          const list = res.data.list || []
          if(isRefresh) {
            this.wallpapers = list
          } else {
            this.wallpapers = [...this.wallpapers, ...list]
          }
          
          this.hasMore = list.length === 10 // 假设每页10条
          if(!isRefresh) {
            this.page++
          }
        }
      } catch(e) {
        console.error(e)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
        if(isRefresh) {
          this.isRefreshing = false
        }
      }
    },
    
    // 处理标签选择
    handleTagSelect(tag) {
      if(this.activeTag === tag) return
      this.activeTag = tag
      this.page = 1
      this.hasMore = true
      this.id = '' // 切换标签时清空id
      // 获取scroll-view组件并滚动到顶部
      this.scrollTop = this.old_scrollTop
      this.$nextTick(function() {
        this.scrollTop = 0
      })
      this.loadWallpapers(true)
    },
    
    // 处理搜索
    handleSearch() {
      // TODO: 实现搜索功能
      uni.showToast({
        title: '搜索功能开发中',
        icon: 'none'
      })
    },
    
    // 处理加载更多
    handleLoadMore() {
      if(!this.loading) {
        this.loadWallpapers()
      }
    },
    
    // 处理下拉刷新
    handleRefresh() {
      this.isRefreshing = true
      this.page = 1
      this.hasMore = true
      this.loadWallpapers(true)
    },
    
    // 预览壁纸
    handlePreview(item) {
      uni.navigateTo({
        url: `/resourcePages/wallpaper/wallpaperDetail?id=${item.id}`
      })
    },
    //保留旧值
    scroll(event) {
      this.old_scrollTop = event.detail.scrollTop
    },
  }
}
</script>

<style lang="scss" scoped>
.wallpaper {
  min-height: 100vh;
  background-color: var(--tn-color-gray-light);
  .tn-custom-nav-bar__back {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    .nav-back-btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.85);
      border-radius: 50%;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
      
      .icon {
        font-size: 42rpx;
        color: #333;
      }
      
      &:active {
        transform: scale(0.95);
      }
    }
  }
  
  &__header {
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 20rpx 30rpx 30rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -20rpx;
      height: 20rpx;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), transparent);
      pointer-events: none;
    }
  }
  
  &__tags {
    display: flex;
    white-space: nowrap;
    margin-top: 20rpx;
    padding: 10rpx 0;
    
    &::-webkit-scrollbar {
      display: none;
    }
  }
  
  &__tag {
    display: inline-block;
    padding: 14rpx 36rpx;
    margin-right: 20rpx;
    font-size: 28rpx;
    color: #666;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 100rpx;
    transition: all 0.3s;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
    
    &--active {
      color: #fff;
      background-color: #222;
      box-shadow: 0 4rpx 12rpx rgba(54, 104, 252, 0.35);
      transform: translateY(-2rpx);
    }
    
    &:active {
      transform: scale(0.95);
    }
  }
  
  &__list {
    padding: 20rpx;
  }
  
  &__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
  }
  
  &__item {
    position: relative;
    border-radius: 24rpx;
    overflow: hidden;
    background-color: #fff;
    
    image {
      width: 100%;
      height: 560rpx;
      display: block;
    }
    
    &-time {
      position: absolute;
      left: 0;
      right: 0;
      top: 100rpx;
      text-align: center;
      z-index: 2;
      
      text {
        font-size: 60rpx;
        color: #fff;
        font-weight: 200;
        letter-spacing: 4rpx;
        text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.3);
      }
      
      .wallpaper__item-hint {
        margin-top: 10rpx;
        font-size: 22rpx;
        color: rgba(255, 255, 255, 0.9);
        text-shadow: 0 2rpx 6rpx rgba(0,0,0,0.4);
        font-weight: 500;
      }
    }
    
    &-info {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 20rpx;
      background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
    }
    
    &-likes {
      color: #fff;
      font-size: 24rpx;
      
      .tn-icon-like {
        margin-right: 8rpx;
      }
    }
  }
  
  &__loading,
  &__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40rpx;
    color: var(--tn-color-gray);
    font-size: 28rpx;
    
    .tn-loading-icon {
      margin-right: 12rpx;
    }
  }
}
</style>